<div id="notice" style="margin-top: 5%;">
    <el-divider><p style="font-size: 27px;">平台公告</p></el-divider>
    <div style="display: grid;justify-content: center;">
        <el-card class="box-card"  v-for="(item, index) in list">
            <div id="notices">
                <div class="gg_sj left">
                    <span class="gg_sj_r left" style="color: #3d6ee0;font-size: 24px;">{{numztime(item.createDate)}}</span>
                    <div class="clearfix"></div>
                </div>
                <div>{{item.title}}</div>
                <div>{{item.description}}</div>
            </div>
            <div style="float: right;"><a @click="details(item.id)">查看详情>></a></div>
        </el-card>
        <button @click="ckgds(page+4)" class="buttonstyle">{{ckgd}}</button>
    </div>
</div>
<div id="footer"></div>
<script>
    // 创建vue
    new Vue({
        // 控制的标签容器
        el: '#notice',
        // 交互的数据
        data() {
            return {
                page: 0,
                notice:'/home/notice',
                getbyid:'/home/getbyid',
                list:[],
                ckgd:'查看更多'
            };
        },
        mounted() {
            this.footer();//渲染底部
            var that_ = this;
            $.post(this.notice, {page: this.page}, function (data) {
                that_.list = data.data;
                //console.log(data.data)
            })
        },
        methods: {
            /**
             * 查看详情
             */
            details(id){
                //console.log(id)
                $.post(this.getbyid, {id: id}, function (data) {
                   // console.log(data.data)

                })
            },
            /**
             * 渲染底部
             */
            footer(){
                $('#footer').load("/home/footer");
            },
            numztime(timestamp) {
                let date = new Date(timestamp);
                let year = date.getFullYear();
                let month = ("0" + (date.getMonth() + 1)).slice(-2);
                let day = ("0" + date.getDate()).slice(-2);
                let hours = ("0" + date.getHours()).slice(-2);
                let minutes = ("0" + date.getMinutes()).slice(-2);
                let seconds = ("0" + date.getSeconds()).slice(-2);

                return `${year}年${month}月${day}日`;
            },
            ckgds(page){
                var that_ = this;
                $.post(this.notice, {page:page}, function (data) {
                    for (let i = 0; i< data.data.length ; i++) {
                        that_.list.push(data.data[i]);
                    }
                    //console.log("------------------")
                    if(data.data.length<4){
                        that_.ckgd = "无更多内容"
                    }
                    that_.page = that_.page+4;
                })
            },
        }
    })
</script>
<style>
    .buttonstyle{
        background-color: blue;
        margin-left: 43%;
        margin-top: 30px;
        color: #ffffff;
        border: 0px;
        width: 100px;
        height: 39px;
    }
    .el-card {
        width: 100%!important;
        margin-top: 40px!important;
</style>